Beispiel: Eine Erstellung einer Basisvorlage im Responsive Design Editor, Schritt für Schritt – 2. Den Inhalt der Vorlage bearbeiten

Im vorherigen Schritt wurde eine neue Vorlage erstellt.

Jetzt werden wir dieser Vorlage Inhalte hinzufügen: eine Header, einen Textkörper und einen Footer.

Hinweis: Es gibt verschiedene Möglichkeiten, den Inhalt der Vorlage zu gestalten. Wir zeigen nur eine Möglichkeit für jeden Abschnitt.

Content Header

Für den Content Header (d. h. ein Navigationsabschnitt am Anfang des Vorlagen-Inhalts, der nichts mit dem „Vorlagen-Header“ zu tun hat) fügen wir eine zweispaltige Zeileein:

  • Eine kleine Spalte auf der linken Seite, die einen „Parana"-Link zur Homepage des Parana-Webshops enthält.
  • Eine breitere Spalte auf der rechten Seite, die drei Links zu bestimmten Bereichen des Parana-Webshops enthält: Mode, Heim und Elektro.

Gehen Sie wie folgt vor:

  • Ziehen Sie eine ‚zweispaltige‘ Zeilenkomponente aus den Komponenten auf der rechten Seite in den Vorlagen-Designbereich, und zwar in den Header-Bereich der Vorlage.
  • Klicken Sie auf das blaue Stiftsymbol der hinzugefügten „zweispaltigen“ Zeilenkomponente, um ihre Eigenschaften anzuzeigen. Ändern Sie das „Spaltenbreitenverhältnis“ auf 14
  • Ziehen Sie in der linken Spalte (dort, wo „Inhalt hier ablegen“ steht, wenn Sie mit dem Mauszeiger darüber fahren) eine „Text“-Komponente von rechts (aus dem Abschnitt „Inhalt“) und legen Sie sie ab.
  • Ziehen Sie in der rechten Spalte (dort, wo „Inhalt hier ablegen“ steht, wenn Sie mit dem Mauszeiger darüber fahren) eine weitere „Text“-Komponente von rechts (aus dem Abschnitt „Inhalt“) und legen Sie sie ab.

Hinweis: Wenn Sie eine Zeile entfernen möchten, können Sie mit dem Mauszeiger über die Zeile fahren und auf das blaue Papierkorbsymbol klicken (es wird empfohlen, die Zeile mit dem Link „Webversion“ beizubehalten, da das Löschen zu Fehlern bei der späteren Erstellung der Journey führen kann).

Ihr Entwurf sieht nun wie folgt aus:

  • Klicken Sie in der linken Spalte, um Text hinzuzufügen:

  • Fügen Sie folgenden Text in Großbuchstaben ein: PARANA

  • Fügen Sie in die rechte Spalte die folgenden Texte ein (mit einigen Leerzeichen dazwischen): Mode, Heim, Elektro

  • Ändern Sie die Schriftart der Texte in Tahoma und die Schriftgröße in 18 px.

  • Richten Sie den PARANA-Text mittig aus.

  • Klicken Sie auf das blaue Stiftsymbol, um die Eigenschaften der Zeile anzuzeigen, und klicken Sie dann auf den Stift rechts im Abschnitt „Stil“ der Eigenschaften, um den Stil zu bearbeiten.

  • Fügen Sie am oberen Rand der Zeile einen Innenabstand hinzu, damit der Text vertikal ausgerichtet wird und in der Mitte der Zeile erscheint.
    Fügen Sie dafür einen Eintrag zu dem „benutzerdefinierten Stil“ hinzu, der den mittleren Abschnitt des Pop-ups darstellt, etwa so: padding-top: 20 px.
    Klicken Sie auf „Ok“, um das Popup-Fenster zu schließen und den benutzerdefinierten Stil anzuwenden.

Dies führt zu einem zusätzlichen Abstand am oberen Innenrand der Zeile:

  • Ändern Sie die Hintergrundfarbe der Zeile in #3bbec0 (Sie können einen Hex-Farbcode eingeben oder einfach eine Farbe aus dem visuellen Farbwähler auswählen):

  • Ändern Sie die Textfarbe des Textes in den beiden Spalten in Weiß (#ffffff), indem Sie einfach den Text und die gewünschte Farbe auswählen:


  • Klicken Sie auf „Übernehmen“.

Ihr Vorlagenentwurf sieht nun wie folgt aus:

Hinweis: Im Vergleich zu einem E-Mail-Design werden Sie die Schlosssymbole auf den verschiedenen Komponenten der Vorlage bemerken.
Der Sperrmechanismus wird hier erklärt.

Fügen wir nun Links zu den Texten hinzu, so dass die E-Mail-Empfänger von der E-Mail-Vorlage aus zu Ihrem Webshop navigieren können.

Dieses Video zeigt, wie man einen Link zu dem „PARANA“-Text hinzufügt, der auf die URL des Webshops abzielt:

Wiederholen Sie diesen Vorgang, um Links zu „Mode“, „Heim“ und „Elektro“ hinzuzufügen.
Anstatt auf die Startseite des Webshops zu verlinken (z.B. https://parana.selligent.com/shop/index.aspx), verlinken Sie jede Kategorie mit der entsprechenden Webseite (z. B. https://parana.selligent.com/shop/default.aspx?CATIDL2=22)

Hinweis: Alle Links werden im Abschnitt ‚Links‘ sichtbar (nach einem Klick auf dieses Symbol oben rechts im Content-Editor ):

Der Header der Vorlage ist jetzt fertig.
Kommen wir nun zum Inhalt des Textes.

Hinweis: Vergessen Sie nicht, Ihre Vorlage regelmäßig zu speichern!

Content Body

Der Textkörper-Inhalt, den wir erstellen wollen, sollte aus einem Bild und Text bestehen.

  • Da sowohl das Bild als auch der Text die gesamte Breite des Textkörpers einnehmen, ziehen wir eine „einspaltige Zeile“ von rechts auf den Design-Bereich im Textkörperbereich.

  • Dann fügen wir innerhalb der einspaltigen Zeile eine Bildkomponente und darunter eine Textkomponente ein.

  • Wählen Sie in den Bildeigenschaften das richtige Bild aus (laden Sie es ggf. in die Bibliothek hoch).

  • Fügen Sie den Text (wie in der obigen Abbildung gezeigt) unter dem Bild hinzu.

  • Legen Sie in den Bildeigenschaften einen Link fest, damit die E-Mail-Empfänger auf das Bild klicken können, um zu Ihrem Webshop zu navigieren.
    Sie können einen neuen Link definieren oder einen vorhandenen aus der Liste auswählen.

Das ist alles für den Inhalt des Textkörpers.
Kommen wir nun zum Footer.

Content Footer

Als Footer möchten wir eine Zeile mit einigen Symbolen für soziale Medien auf der linken Seite und Copyright-Informationen zusammen mit einem Link zum Abbestellen auf der rechten Seite.

  • Eine Fußzeile ist standardmäßig vorhanden. Sie besteht aus einer einzigen Spalte. Da wir stattdessen eine „zweispaltige“ Zeile wünschen, entfernen wir den Standard-Footer, indem wir mit dem Mauszeiger darüber fahren und auf das blaue Papierkorbsymbol klicken.

  • Ziehen Sie nun eine „zweispaltige“ Zeile aus den Komponenten auf der rechten Seite in den Vorlagen-Designbereich, in den Footer-Bereich der Vorlage.
  • Klicken Sie auf das blaue Stiftsymbol der hinzugefügten „zweispaltigen“ Zeilenkomponente, um ihre Eigenschaften anzuzeigen. Ändern Sie das „Spaltenbreitenverhältnis“ auf 21
  • Wählen Sie die linke Spalte aus und stellen Sie das „Spaltenlayout“ auf „horizontal“ ein (da wir 4 Bilder nebeneinander hinzufügen wollen).
  • Ziehen Sie in diese linke Spalte 4 „Bildkomponenten“ von rechts (aus dem Abschnitt „Inhalt“) und legen Sie sie ab.
  • Ziehen Sie in der rechten Spalte eine „Text“-Komponente von rechts (aus dem Abschnitt „Inhalt“) und legen Sie sie ab.

Das Video zeigt die obigen Schritte:

  • Für die Bildkomponenten:
    • Wählen Sie für jedes Bild das entsprechende Symbol (Facebook, 'X' (ehemals Twitter), Google, YouTube). Laden Sie bei Bedarf Bilder hoch.
    • Legen Sie die Bildbreite für jedes Symbol auf 30 px fest.
  • Für die Text-Komponente:
    • Den Text hinzufügen: „© 2022 Parana - Abmeldung“

Das Video zeigt die obigen Schritte:

Ihr Footer-Entwurf sieht nun wie folgt aus:

  • Ändern Sie die Hintergrundfarbe der Zeile in dunkelgrau: Klicken Sie auf die Zeile und das blaue Bleistiftsymbol. Wählen Sie dann im Abschnitt „Stil“ der Eigenschaften der Zeile die dunkelgraue Farbe aus der visuellen Farbauswahl (oder geben Sie einen Hex-Farbcode ein).


  • Ändern Sie die Textfarbe des Textes „© 2022 Parana - Abbestellen“ in der rechten Spalte auf weiß, indem Sie den Text markieren und auf das Dropdown-Menü neben dem „A“-Symbol klicken.
    Die weiße Farbe kann dann über eine visuelle Farbauswahl (oder durch Eingabe eines Hex-Farbcodes) ausgewählt und angewendet werden.


  • Bearbeiten Sie in den Eigenschaften der Zeile den Stil:


  • Fügen Sie Folgendes zu dem „benutzerdefinierten Stil“ hinzu:
    vertikale Ausrichtung: Mittig;


    Die Symbole der sozialen Medien und der Text werden dann vertikal in der Mitte der Zeile statt am oberen Rand ausgerichtet.

Wir müssen nun Links zu den Symbolen für soziale Medien und zum Text für die Abmeldung hinzufügen:

  • Klicken Sie auf das Facebook-Symbol und fügen Sie den Link hinzu.
  • Geben Sie den Linknamen und eine externe Facebook-Ziel-URL ein und klicken Sie auf „Ok“.
  • Wiederholen Sie dies für die anderen Social-Media-Symbole, um sie mit den entsprechenden URLs für 'X' (ehemals Twitter), Google und YouTube zu verknüpfen.

  • Schließlich fügen wir noch einen Link zum Text „Abbestellen“ hinzu.


    Lassen Sie uns einen neuen Link erstellen und eine externe Ziel-URL als Ziel des Links festlegen.
    Aktivieren Sie auch den „Abbestellen-Link“-Schalter, damit die Validierung dies als Abbestellen-Link erkennt.


    Setzen Sie die Textfarbe auf Weiß (hexadezimaler Farbcode: :#ffffff).

Hinweis: Vergessen Sie nicht, Ihre Vorlage regelmäßig zu speichern!

Inhaltskomponenten freischalten

Wir haben eine Vorlage erstellt, da wir möchten, dass die Marketingfachleute, die die Journey einrichten, später in der Lage sind, einige Inhalte zu bearbeiten, bevor sie die endgültigen E-Mails verschicken.
Dazu müssen wir sicherstellen, dass die richtigen Komponenten in der Vorlage entsperrt sind.
Das sollten wir jetzt tun.

  • Wählen Sie das Bild Frühlingsangebote aus und klicken Sie in den Eigenschaften auf der rechten Seite auf das Schlosssymbol.

  • Es ändert sich in ein entsperrtes Symbol, und im Inhalt auf der linken Seite ist das Schloss auf dem Bild verschwunden.

  • Dasselbe gilt für den Text unterhalb des Bildes. Wählen Sie es aus, und klicken Sie in den Eigenschaften auf der rechten Seite auf das Schlosssymbol.

  • Das Symbol ändert sich in ein entsperrtes Symbol, und im Inhalt auf der linken Seite ist das Schloss am Text verschwunden.

Sowohl das Bild als auch der Text sind nun entsperrt.

Speichern Sie die Vorlage.

SCHRITTE:
1. Neue Vorlage erstellen
2. Den Inhalt der Vorlage bearbeiten
3. Header der Vorlage hinzufügen
4. Textversion extrahieren
5. Vorlage testen/Vorschau anzeigen
6. Eine einfache Journey erstellen, um die E-Mail-Vorlage an Kontakte zu senden